<template>
  <div class="radio-filter flex items-center font-size-14px mb-20px">
    <label class="mr-16px fw-500" :style="labelStyle">{{ props.label }}:</label>
    <div
      class="items all"
      :class="{ 'is-active': model === '' }"
      @click="itemClick('')"
    >
      全部
    </div>
    <div
      v-for="item in props.list"
      class="items"
      :class="{ 'is-active': model === item.value }"
      @click="itemClick(item.value)"
    >
      {{ item.label }}
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  label: String,
  list: Array,
  labelWidth: {
    type: Number,
    default: 70,
  },
  labelPosition: {
    type: String,
    default: "right",
  },
});
const emits = defineEmits(["change"]);
const model = defineModel({
  type: [String, Number],
  default: "",
});
const labelStyle = computed(() => ({
  width: `${props.labelWidth}px`,
  textAlign: props.labelPosition,
}));
const itemClick = (value) => {
  model.value = value;
  emits("change", value);
};
</script>

<style scoped lang="less">
.items {
  margin-right: 8px;
  padding: 6px 10px;
  line-height: 20px;
  border-radius: 4px;
  cursor: pointer;
  &.is-active {
    background: @main-color;
    color: #fff;
  }
}
</style>
